<template>
	<view>
		<view class="tabs">
			<view v-for="(item,index) in list" :key="index" :class="{active:num==index}" @click="table(index)">{{item.title}}</view>
		</view>

		<view class="tabContent">
			<view v-for="(item,index) in list" :key="index" v-show="index==num">
				<view v-for="(tabCon,index) in item.tabsCon" :key="index">
					<view class='courseBox'>
						<view class='flex pb_30'>
							<view class='courseImg'>
								<image :src='tabCon.src'></image>
							</view>
							<view class='courseInfo'>
								<view class="fs_30">{{tabCon.title}}</view>
								<view v-if="item.title=='已过期'" class="overdue">过期</view>
								<view v-else class="color_red fs_36">￥{{tabCon.price}}</view>
							</view>
						</view>
						<view class='justify_between topLine2 pt_30 fs_26'>
							<view class='time color_8E'>
								<image src='../../static/time2x.png'></image>
								{{tabCon.date}}
							</view>
							<view v-if="item.title=='已付款'" class="color_red2">{{item.title}}</view>
							<view v-if="item.title=='未付款'" class="color_red2 unpaid">待支付</view>
							<view v-if="item.title=='已过期'" class="color_8E">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				list: [{
						title: '已付款',
						tabsCon: [{
								src: '../../static/img_kecheng02.png',
								title: '英语零基础直达',
								price: 399,
								date: '2018-09-12 18:30'
							},
							{
								src: '../../static/img_kecheng02.png',
								title: '英语零基础直达',
								price: 399,
								date: '2018-09-12 18:30'
							}
						]
					},
					{
						title: '未付款',
						tabsCon: [{
							src: '../../static/img_kecheng02.png',
							title: '英语零基础直达',
							price: 399,
							date: '2018-09-12 18:30'
						}]
					},
					{
						title: '已过期',
						tabsCon: [{
								src: '../../static/img_kecheng02.png',
								title: '英语零基础直达',
								date: '2018-09-12 18:30'
							},
							{
								src: '../../static/img_kecheng02.png',
								title: '英语零基础直达',
								date: '2018-09-12 18:30'
							}
						]
					}
				],
			}
		},
		methods: {
			// tab
			table(index) {
				this.num = index;
			}
		}
	}
</script>

<style>
	/* tab */
	.tabs {
		display: flex;
		line-height: 2.5;
		background: #fff;
	}

	.tabs view {
		flex: 1;
		color: #686868;
		text-align: center;
		font-size: 30rpx;
	}

	.tabs .active {
		color: #000;
		position: relative;
	}

	.tabs .active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 10%;
		height: 5rpx;
		background: #1F7AFF;
		margin: 0 auto;
	}

	.tabContent .tabCont-item {
		display: none;
	}

	.tabContent .tabCont-item.active {
		display: block;
	}

	/* 已付款 */
	.courseBox {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.courseImg image {
		width: 220rpx;
		height: 162rpx;
	}

	.courseInfo {
		margin-left: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.time image {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	/* 未支付 */
	.unpaid {
		border: 1rpx solid #FFC9AC;
		padding: 5rpx 30rpx;
		border-radius: 30rpx;
	}

	/* 已过期 */
	.overdue {
		font-size: 28rpx;
		background-color: #ccc;
		color: #fff;
		border-radius: 6rpx;
		width: 90rpx;
		text-align: center;
	}
</style>
